import styled from 'styled-components'
import vmpImg from '@img/vmp.png'
import img from '@img/all.png'
export const StyledWrap = styled.div`
	display: flex;
	align-items: center;
	flex-direction: column;
	align-items: flex-start;
	.mcc_vmp_plan_name,
	.mcc_vmp_plan_option {
		display: flex;
		align-items: center;
		.label {
			margin-right: 24px;
		}
		.savePlan,
		.saveAsPlan,
		.updatePlan {
			margin-left: 16px;
		}
	}
	.mcc_vmp_plan_beSelect_wrap {
		margin-top: 20px;
		display: flex;
		height: 50px;
		align-items: center;
		.mcc_vmp_plan_beSelect {
			display: flex;
			align-items: center;
			span {
				margin-left: 10px;
			}
		}
		.style-box {
			width: 64px;
			height: 38px;
			margin: 0 3px;
			float: left;
			background-image: url(${vmpImg});
			&.single-box {
				position: relative;
				left: 50%;
				transform: translateX(-50%);
			}
			&.one {
				background-position: -256px 0;
				&.select {
					background-position: -320px 0;
				}
			}
			&.two_a {
				background-position: -512px 0;
				&.select {
					background-position: -576px 0;
				}
			}
			&.two_b {
				background-position: -768px 0;
				&.select {
					background-position: -832px 0;
				}
			}
			&.two_c {
				background-position: 0 -1862px;
				&.select {
					background-position: -64px -1862px;
				}
			}
			&.two_d {
				background-position: -256px -1862px;
				&.select {
					background-position: -320px -1862px;
				}
			}
			&.two_e {
				background-position: -512px -1862px;
				&.select {
					background-position: -576px -1862px;
				}
			}
			&.three_a {
				background-position: 0 -38px;
				&.select {
					background-position: -64px -38px;
				}
			}
			&.three_b {
				background-position: -256px -38px;
				&.select {
					background-position: -320px -38px;
				}
			}
			&.three_c {
				background-position: 0 -2178px;
				&.select {
					background-position: -64px -2178px;
				}
			}
			&.four_a {
				background-position: -512px -38px;
				&.select {
					background-position: -576px -38px;
				}
			}
			&.four_b {
				background-position: -256px -2178px;
				&.select {
					background-position: -320px -2178px;
				}
			}
			&.four_c {
				background-position: -768px -38px;
				&.select {
					background-position: -832px -38px;
				}
			}
			&.five_a {
				background-position: 0 -76px;
				&.select {
					background-position: -64px -76px;
				}
			}
			&.five_b {
				background-position: -256px -76px;
				&.select {
					background-position: -320px -76px;
				}
			}
			&.six_a {
				background-position: -512px -76px;
				&.select {
					background-position: -576px -76px;
				}
			}
			&.six_b {
				background-position: -768px -1862px;
				&.select {
					background-position: -832px -1862px;
				}
			}
			&.seven {
				background-position: 0 -114px;
				&.select {
					background-position: -64px -114px;
				}
			}
			&.eight {
				background-position: -512px -114px;
				&.select {
					background-position: -576px -114px;
				}
			}
			&.nine {
				background-position: 0 -152px;
				&.select {
					background-position: -64px -152px;
				}
			}
			&.ten {
				background-position: -256px -152px;
				&.select {
					background-position: -320px -152px;
				}
			}
			&.eleven_a {
				background-position: -768px -152px;
				&.select {
					background-position: -832px -152px;
				}
			}
			&.eleven_b {
				background-position: 0 -1900px;
				&.select {
					background-position: -128px -1900px;
				}
			}
			&.twelve_a {
				background-position: 0 -190px;
				&.select {
					background-position: -64px -190px;
				}
			}
			&.twelve_b {
				background-position: -256px -1900px;
				&.select {
					background-position: -320px -1900px;
				}
			}
			&.thirteen {
				background-position: -256px -190px;
				&.select {
					background-position: -320px -190px;
				}
			}
			&.fourteen {
				background-position: -768px -190px;
				&.select {
					background-position: -832px -190px;
				}
			}
			&.fifteen_a {
				background-position: 0 -228px;
				&.select {
					background-position: -64px -228px;
				}
			}
			&.fifteen_b {
				background-position: -512px -1900px;
				&.select {
					background-position: -576px -1900px;
				}
			}
			&.sixteen {
				background-position: -256px -228px;
				&.select {
					background-position: -320px -228px;
				}
			}
			&.seventeen {
				background-position: -512px -228px;
				&.select {
					background-position: -576px -228px;
				}
			}
			&.eighteen {
				background-position: -768px -228px;
				&.select {
					background-position: -832px -228px;
				}
			}
			&.nineteen {
				background-position: 0 -266px;
				&.select {
					background-position: -64px -266px;
				}
			}
			&.twenty {
				background-position: -256px -266px;
				&.select {
					background-position: -320px -266px;
				}
			}
			&.twenty_one {
				background-position: -512px -266px;
				&.select {
					background-position: -576px -266px;
				}
			}
			&.twenty_two {
				background-position: -768px -266px;
				&.select {
					background-position: -832px -266px;
				}
			}
			&.twenty_four {
				background-position: -256px -304px;
				&.select {
					background-position: -320px -304px;
				}
			}
			&.twenty_five {
				background-position: -512px -304px;
				&.select {
					background-position: -576px -304px;
				}
			}
		}
	}
`
export const StyledVmpSelectItem = styled.div`
	display: flex;
	align-items: center;
	position: relative;
	padding-left: 20px;
	.select-icon {
		height: 7px;
		left: 3px;
		position: absolute;
		top: 16px;
		width: 10px;
	}
	&.selected .select-icon {
		background-image: url(${img});
		background-position: -10px -654px;
	}
	.delete-icon {
		display: none;
		cursor: pointer;
		position: absolute;
		right: 20px;
		top: 18px;
	}
	.delete-icon:after,
	.delete-icon:before {
		content: '';
		position: absolute;
		width: 9px;
		border: 1px solid #fff;
	}
	.delete-icon:after {
		transform: rotate(-45deg);
	}
	.delete-icon:before {
		transform: rotate(45deg);
	}
	&:hover .delete-icon {
		display: inline-block;
	}
	.auto {
		display: flex;
		justify-content: center;
		width: 64px;
		height: 36px;
		margin-right: 7px;
		background-color: #f3f3f3;
		span {
			color: #acacac;
			max-width: 60px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
`
export const StyledVmpPlanListModal = styled.div`
	display: flex;
	justify-content: space-between;
	align-items: center;
	.slider-view {
		display: block;
		width: 100%;
		.style-box-item {
			padding: 10px 14px 0px;
			width: 121px;
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			.style-box-item-name {
				width: 100%;
				display: inline-flex;
				flex-direction: column;
				justify-content: center;
				text-align: center;
			}
		}
	}
	.style-box {
		float: left;
		height: 82px;
		width: 121px;
		margin: 2px;
		cursor: pointer;
		border: 1px solid #fff;
		box-sizing: border-box;
		background-image: url(${vmpImg});
		&.select {
			border: 1px solid #3a94d3;
		}
		&.one {
			background-position: -476px -342px;
		}
		&.two_a {
			background-position: 0 -422px;
		}
		&.two_b {
			background-position: -476px -422px;
		}
		&.two_c {
			background-position: -476px -1702px;
		}
		&.two_d {
			background-position: 0 -1782px;
		}
		&.two_e {
			background-position: -476px -1782px;
		}
		&.three_a {
			background-position: -476px -502px;
		}
		&.three_b {
			background-position: 0 -502px;
		}
		&.three_c {
			background-position: 0 -2098px;
		}
		&.four_a {
			background-position: 0 -582px;
		}
		&.four_b {
			background-position: -476px -2098px;
		}
		&.four_c {
			background-position: -476px -582px;
		}
		&.five_a {
			background-position: 0 -662px;
		}
		&.five_b {
			background-position: -476px -662px;
		}
		&.six_a {
			background-position: 0 -742px;
		}
		&.six_b {
			background-position: 0 -1938px;
		}
		&.seven {
			background-position: 0 -822px;
		}
		&.eight {
			background-position: 0 -902px;
		}
		&.nine {
			background-position: 0 -982px;
		}
		&.ten {
			background-position: -476px -982px;
		}
		&.eleven_a {
			background-position: -476px -1062px;
		}
		&.eleven_b {
			background-position: -476px -1938px;
		}
		&.twelve_a {
			background-position: 0 -1142px;
		}
		&.twelve_b {
			background-position: 0 -2018px;
		}
		&.thirteen {
			background-position: -476px -1142px;
		}
		&.fourteen {
			background-position: -476px -1222px;
		}
		&.fifteen_a {
			background-position: 0 -1302px;
		}
		&.fifteen_b {
			background-position: -476px -2018px;
		}
		&.sixteen {
			background-position: -476px -1302px;
		}
		&.seventeen {
			background-position: 0 -1382px;
		}
		&.eighteen {
			background-position: -476px -1382px;
		}
		&.nineteen {
			background-position: 0 -1462px;
		}
		&.twenty {
			background-position: -476px -1462px;
		}
		&.twenty_one {
			background-position: 0 -1542px;
		}
		&.twenty_two {
			background-position: -476px -1542px;
		}
		&.twenty_four {
			background-position: -476px -1622px;
		}
		&.twenty_five {
			background-position: 0 -1702px;
		}
	}
`
export const StyledVmpPlanModal = styled.div`
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 80px;
	.label {
		width: 50px;
		margin-right: 5px;
	}
	.savePlan {
		margin-left: 8px;
	}
`
export const StylePreview = styled.div`
	display: inline-block;
	width: 64px;
	height: 36px;
	background-image: url(${vmpImg});
	margin-right: 7px;
	&.default {
		background-position: -768px -2179px;
	}
	&.auto {
		// background-position: -512px -2179px;
	}
	&.one {
		background-position: -256px 0;
	}
	&.two_a {
		background-position: -512px 0;
	}
	&.two_b {
		background-position: -768px 0;
	}
	&.two_c {
		background-position: 0 -1862px;
	}
	&.two_d {
		background-position: -256px -1862px;
	}
	&.two_e {
		background-position: -512px -1862px;
	}
	&.three_a {
		background-position: 0 -38px;
	}
	&.three_b {
		background-position: -256px -38px;
	}
	&.three_c {
		background-position: 0 -2178px;
	}
	&.four_a {
		background-position: -512px -38px;
	}
	&.four_b {
		background-position: -256px -2178px;
	}
	&.four_c {
		background-position: -768px -38px;
	}
	&.five_a {
		background-position: 0 -76px;
	}
	&.five_b {
		background-position: -256px -76px;
	}
	&.six_a {
		background-position: -512px -76px;
	}
	&.six_b {
		background-position: -768px -1862px;
	}
	&.seven {
		background-position: 0 -114px;
	}
	&.eight {
		background-position: -512px -114px;
	}
	&.nine {
		background-position: 0 -152px;
	}
	&.ten {
		background-position: -256px -152px;
	}
	&.eleven_a {
		background-position: -768px -152px;
	}
	&.eleven_b {
		background-position: 0 -1900px;
	}
	&.twelve_a {
		background-position: 0 -190px;
	}
	&.twelve_b {
		background-position: -256px -1900px;
	}
	&.thirteen {
		background-position: -256px -190px;
	}
	&.fourteen {
		background-position: -768px -190px;
	}
	&.fifteen_a {
		background-position: 0 -228px;
	}
	&.fifteen_b {
		background-position: -512px -1900px;
	}
	&.sixteen {
		background-position: -256px -228px;
	}
	&.seventeen {
		background-position: -512px -228px;
	}
	&.eighteen {
		background-position: -768px -228px;
	}
	&.nineteen {
		background-position: 0 -266px;
	}
	&.twenty {
		background-position: -256px -266px;
	}
	&.twenty_one {
		background-position: -512px -266px;
	}
	&.twenty_two {
		background-position: -768px -266px;
	}
	&.twenty_four {
		background-position: -256px -304px;
	}
	&.twenty_five {
		background-position: -512px -304px;
	}
`
